import React, { Component } from "react";
// import React, { PureComponent } from "react";

import Child from "./Child";

// 只有类组件有生命周期
// PureComponent帮助我们自动去比较改变前和改变后的内容是否一致，从而自动判断是否要重新渲染
class App extends Component {
  // 初始化阶段
  // constructor就是react组件的第一个生命周期
  // constructor会在组件被组件被实例化的时候自动调用，最先调用，只会被调用一次
  // 一般可以去初始化state，改变事件的this指向，定义ref等
  // constructor还可以接收一个参数是props,一般用于给state做初始值用
  constructor(props) {
    super();
    this.state = {
      name: "zhangsan",
      count: props.count,
      list: [1, 2, 3, 4, 5],
      // list2: [],
    };
    // this.fn = this.fn.bind(this)
    // this.ipt = createRef();
  }

  // 挂载阶段
  // componentWillMount表示挂载前
  // componentWillMount已经被废弃了，前面加上UNSAFE_
  // 这里不能做数据请求, 因为fiber算法执行的时间是在组件的开始挂载到挂载结束,所以有可能会让请求执行多次
  UNSAFE_componentWillMount() {
    console.log("componentWillMount");
    // fetch("http://www.pudge.wang:3080/api/rated/list")
    //   .then((response) => response.json())
    //   .then((res) => {
    //     this.setState({
    //       list: res.result,
    //     });
    //   });
  }

  // render本身也是生命周期
  // render必须要有return，return的是jsx
  // render里面一般可以做解构，还可以做数据的转换或者处理
  // 这里不能做数据请求, 因为fiber算法执行的时间是在组件的开始挂载到挂载结束,所以有可能会让请求执行多次
  render() {
    console.log("render");
    const { name, list } = this.state;
    const newList = list.map((item) => item + 1);

    return (
      <>
        <h2>16.3版本之前的生命周期</h2>
        <p>{name}</p>
        <ul>
          {newList.map((item) => (
            <li key={item}>{item}</li>
          ))}
        </ul>
        {/* <ul>
          {this.state.list2.map((item) => (
            <li key={item._id}>{item.title}</li>
          ))}
        </ul> */}

        <Child name={this.state.name} />
      </>
    );
  }

  // 挂载结束的生命周期
  // 这里面什么都能做, 可以安全的做数据请求
  componentDidMount() {
    console.log("componentDidMount");
    setTimeout(() => {
      this.setState({
        name: "zhangsan",
      });
    }, 2000);
    // fetch("http://www.pudge.wang:3080/api/rated/list")
    //   .then((response) => response.json())
    //   .then((res) => {
    //     this.setState({
    //       list2: res.result,
    //     });
    //   });
  }

  // 更新阶段
  // state的更新

  // 询问组件是否要更新
  // shouldComponentUpdate必须要返回true或者false,表示是否要去更新组件
  // 里面可以接收两个参数是nextProps, nextState
  // 涉及到性能优化
  shouldComponentUpdate(nextProps, nextState) {
    console.log("shouldComponentUpdate");
    // if (nextState.name === this.state.name) {
    //   return false;
    // } else {
    //   return true;
    // }
    return nextState.name !== this.state.name;
  }

  // 组件将要更新
  // 已经被废弃了
  UNSAFE_componentWillUpdate() {
    console.log("componentWillUpdate", this.state.name);
  }

  // 组件更新完毕
  // 不要再这里改变数据，会造成死循环
  componentDidUpdate() {
    console.log("componentDidUpdate", this.state.name);
  }

  // 卸载阶段
  // 关闭定时器，关闭websocket长连接，关闭js的事件监听，销毁第三方插件的实例
  componentWillUnmount() {
    console.log("componentWillUnmount");
  }
}

export default App;
